---
title: Progress Bars
description: Progress bar components built with Tailwind CSS v4. Responsive progress indicators for tasks, uploads, and workflows. Features linear bars, circular progress, segmented steps, and status labels. Customizable and accessible for modern web applications.
category: application
emoji: 📊
slug: progress-bars
tag: new
wrapper: h-[400px]
terms:
  - indicator
  - loading
  - status
components:
  - { title: 'Basic' }
  - { title: 'With labels and status colors' }
  - { title: 'Compact with metadata' }
  - { title: 'Circular progress' }
---

import CollectionHeader from '../../../components/CollectionHeader.astro'

<CollectionHeader>
  # Progress Bar Components

  <p>{frontmatter.description}</p>
</CollectionHeader>
